<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Bootstrap, from Twitter</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="">
		<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
		<link href='/assets/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
		<link href='/assets/js/plugins/chosen/chosen.css' rel='stylesheet' type='text/css'>
		<style>
			body {
				padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
			}
		</style>

		<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
		<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->

		<!-- Le fav and touch icons -->
		<link rel="shortcut icon" href="/assets/img/favicon.ico">
	</head>

	<body id="body">
		<div class="navbar navbar-fixed-top">
			<div class="navbar-inner">
				<div class="container">
					<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
					<a class="brand" href="#">CBR Assignment 2012</a>
				</div>
			</div>
		</div>

		<div class="container">
			<h1>RECIPES FINDER</h1>
			<p>
				<i>Prepared by Thomas Dao and Jeannie Tan</i>
			</p>
			<hr/>
			<form action="/home/" method="GET">
				<div class="row">
					<div class="span4">
						<h2>What I like</h2>
						<p></p>
						<select name="like" data-placeholder="What I like" class="chzn-select" multiple>
							{% for tag in tags %}
							<option value={{ tag.tag }}>{{ tag.tag }}</option>
							{% endfor %}
						</select>
					</div>
					<div class="span4">
						<h2>What I don't like</h2>
						<p></p>
						<select name="hate" data-placeholder="What I don't like'" class="chzn-select" multiple>
							{% for tag in tags %}
							<option value={{ tag.tag }}>{{ tag.tag }}</option>
							{% endfor %}
						</select>
					</div>
					<div class="span4">
						<h2>Maybe include these tags</h2>
						<p></p>
						<select name="other" data-placeholder="Maybe include these tags" class="chzn-select" multiple>
							{% for tag in tags %}
							<option value={{ tag.tag }}>{{ tag.tag }}</option>
							{% endfor %}
						</select>
					</div>
				</div>
				<br/>
				<div class="row">
					<div class="span3">
						<input type="submit" value="Search"  class="btn btn-primary"/>
					</div>
				</div>

			</form>
			<div class="row">
				<div class="span12">
					{% for recipe in recipes %}
					<b>{{ recipe.title }}</b><b class="pull-right">{{ recipe.get('similarity') }}%</b>
					<br/>
					<div class="clear:both"></div>
					<a class="like" href="/home/like/{{ recipe.get('id') }}/">Like</a>
					<b class="pull-right"> <span>{{ recipe.get('likes') }}</span> people liked this</b>
					<br/>
					<p>
						{% for line in recipe.get('recipe').splitlines() %}
						{{line}}
						<br>
						{% endfor %}
					</p>
					<hr/>
					{% endfor %}
				</div>
			</div>

		</div>
		<!-- /container -->

		<!-- Le javascript
		================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script src="/assets/js/plugins/chosen/chosen.jquery.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(".chzn-select").chosen();
			$(".chzn-select-deselect").chosen({
				allow_single_deselect : true
			});

			$('.like').click(function(e) {
				e.preventDefault();
				var $this = this;
				console.log($this);
				$.post(this.href, function(data) {
					window.location.reload();
				});

			});
		</script>

	</body>
</html>
